<template>
	<picker  @change="bindPickerChange" @columnchange="columnchange" :range="array" range-key="name" :value="value"
		mode="multiSelector">
		<slot></slot>
	</picker>
</template>

<script>
	export default {
		props: {
			addressValue: {
				type: Object,
				default: true
			}
		},
		data() {
			return {
				// value 每一项的值表示选择了 range 对应项中的第几个（下标从 0 开始）
				// 第一项是省列数组的下标  第二项是市列数组的小下标  第三项是区列数组的下标 
				value: [0, 0, 0],
				array: [],
				index: 0,
				AllAddress: [],
				selectVal: ['', '', '']
			}
		},
		created() {
			this.getData()
		},
		methods: {
			// 初始地址
			getData() {
				let _this = this
				_this.$api.get('area/all', {}).then(res => {
					if (res.code == 1) {
						_this.AllAddress = res.data.list
						_this.updateSourceDate() // 更新源数据
						_this.updateAddressDate() // 更新结果数据
						_this.$forceUpdate() // 触发双向绑定
						if(_this.addressValue != ''){
							_this.array[0].forEach((item,index)=>{
								if(item.id == _this.addressValue.provinceId){
									_this.value[0] = index
								}
							})
							// 得到第一个省后，需要重新更新市和区
							_this.updateSourceDate() 
							_this.array[1].forEach((item,index)=>{
								if(item.id == _this.addressValue.cityId){
									_this.value[1] = index
								}
							})
							_this.array[2].forEach((item,index)=>{
								if(item.id == _this.addressValue.areaId){
									_this.value[2] = index
								}
							})
							_this.updateAddressDate() // 更新结果数据
							_this.$forceUpdate() // 触发双向绑定
							_this.bindPickerChange()
						}
					}
				})
			},
			/**
			 * 地址控件改变控件，某一列的值发生改变时触发
			 * @param {Object} e  
			 * column表示改变了第几列
			 * value 表示变更值的下标
			 */
			columnchange(e) {
				this.updateSelectIndex(e.detail.column, e.detail.value) // 更新选择索引
				this.updateSourceDate() // 更新源数据
				this.updateAddressDate() // 更新结果数据
				this.$forceUpdate() // 触发双向绑定
			},
			/**
			 * 更新源数据
			 * 依据更新的value索引值重新去遍历数组得到最新的数据
			 */
			updateSourceDate() {
				this.array = []
				// 省列数组
				this.array[0] = this.AllAddress.map(obj => {
					return {
						id: obj.id,
						name: obj.name
					}
				})
				// 市列数组
				this.array[1] = this.AllAddress[this.value[0]].city.map(obj => {
					return {
						id: obj.id,
						name: obj.name
					}
				})
				// 区列数组
				this.array[2] = this.AllAddress[this.value[0]].city[this.value[1]].area.map(obj => {
					return {
						id: obj.id,
						name: obj.name
					}
				})
			},
			/**
			 * 更新索引
			 * @param {Object} column  表示改变了第几列
			 * @param {Object} value  表示第几列的第几个的索引值
			 */
			updateSelectIndex(column, value) {
				// 让value的每一项对应当前省、市、区在数组中的索引值
				let arr = JSON.parse(JSON.stringify(this.value)) 
				arr[column] = value
				// 初始化
				if (column === 0) {
					arr[1] = 0
					arr[2] = 0
				}
				if (column === 1) {
					arr[2] = 0
				}
				this.value = arr
			},
			/**
			 * 更新结果数据 
			 */
			updateAddressDate() {
				// 每更新一次，他的索引值会变化，依据更新的索引值得到最新的选择
				this.selectVal[0] = this.array[0][this.value[0]].name
				this.selectVal[1] = this.array[1][this.value[1]].name
				this.selectVal[2] = this.array[2][this.value[2]].name
			},
			/**
			 * 点击确定
			 */
			bindPickerChange(e) {
				this.$emit('change', {
					index: this.value,
					provinceId:this.array[0][this.value[0]].id,
					cityId: this.array[1][this.value[1]].id,
					areaId:this.array[2][this.value[2]].id,
					data: this.selectVal
				})
			}
		}
	}
</script>

<style>
</style>